<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="100">
        <vxe-form-item title="上级菜单" field="parentId" span="24" :item-render="{}">
          <template #default="{ data }">
            <el-cascader ref="cascaderHandleRef"
                         @change="changeLanguage"
                         v-model="data.parentId" :options="options" filterable
                         :props="{ value: 'id', label: 'name', checkStrictly: true, emitPath: false }" clearable
                         style="width: 100%">
                  <span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;"
                        @click="clickNode($event, node)">{{ data.name }}</span>

            </el-cascader>
          </template>
        </vxe-form-item>

        <vxe-form-item title="菜单类型" field="type" span="24" :item-render="{}">
          <template #default="{ data }">
            <el-radio-group v-model="data.type">
              <el-radio
                  v-for="dict in dictType.menu_type"
                  :key="dict.value"
                  :label="dict.value"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </template>
        </vxe-form-item>

        <vxe-form-item title="菜单图标" field="icon" span="24" :item-render="{}">
          <template #default="{ data }">
            <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
              <IconSelect ref="iconSelect" @selected="selected" :active-icon="data.icon"/>
              <vxe-input slot="reference" v-model="data.icon" placeholder="点击选择图标" readonly>
                <svg-icon v-if="data.icon" slot="prefix" :icon-class="data.icon" style="width: 25px;"/>
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
              </vxe-input>
            </el-popover>
          </template>
        </vxe-form-item>
        <vxe-form-item title="菜单名称" field="name" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入菜单名称"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="排序" field="sort" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.sort" placeholder="请输入排序" type="integer"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="是否外链" field="frame" span="12" :item-render="{}"
                       :title-prefix="{ content: '选择是外链则路由地址需要以`http(s)://`开头', icon: 'vxe-icon-question-circle-fill' }"
                       :visible="form.info.type !== 'P'">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.frame">
              <vxe-radio v-for="dict in dictType.judge" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="路由地址" field="path" span="12" :item-render="{}"
                       :title-prefix="{ content: '访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头', icon: 'vxe-icon-question-circle-fill' }"
                       :visible="form.info.type !== 'P'">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.path" showWordCount clearable placeholder="请输入组件路径"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="组件路径" field="component" span="12" :item-render="{}"
                       :title-prefix="{ content: '访问的组件路径，如：`system/user/index`，默认在`views`目录下', icon: 'vxe-icon-question-circle-fill' }"
                       :visible="form.info.type === 'R'">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.component" showWordCount clearable
                       placeholder="请输入组件路径"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="权限字符" field="perms" span="12" :item-render="{}"
                       :title-prefix="{ content: '控制器中定义的权限字符，如：@SaCheckPermission', icon: 'vxe-icon-question-circle-fill' }"
                       :visible="form.info.type !== 'C'">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.perms" showWordCount clearable placeholder="请输入权限字符"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="路由参数" field="query" span="12" :item-render="{}"
                       :title-prefix='{ content: "访问路由的默认传递参数，如：`{\"id\": 1, \"name\": \"ry\"}`", icon: "vxe-icon-question-circle-fill" }'
                       :visible="form.info.type  === 'R'">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.query" showWordCount clearable placeholder="请输入路由参数"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="是否缓存" field="cache" span="12" :item-render="{}"
                       :title-prefix='{ content: "选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致", icon: "vxe-icon-question-circle-fill" }'
                       :visible="form.info.type  === 'R'">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.cache">
              <vxe-radio v-for="dict in dictType.judge" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="是否隐藏" field="visible" span="12" :item-render="{}"
                       :title-prefix='{ content: "选择隐藏则路由将不会出现在侧边栏，但仍然可以访问", icon: "vxe-icon-question-circle-fill" }'
                       :visible="form.info.type  !== 'P'">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.visible">
              <vxe-radio v-for="dict in dictType.judge" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="菜单状态" field="status" span="12"
                       :title-prefix='{ content: "选择停用则路由将不会出现在侧边栏，也不能被访问", icon: "vxe-icon-question-circle-fill" }'
                       :item-render="{}">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.status">
              <vxe-radio v-for="dict in dictType.enable_status" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>

<script>
import addUpdate from '@/mixins/add-update.js';
import IconSelect from "@/components/IconSelect/index.vue";

export default {
  name: 'addUpdateForm',
  components: {IconSelect},
  mixins: [addUpdate],
  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      options: [],
      addUrl: '/sysMenu',
      updateUrl: '/sysMenu',
      byIdUrl: '/sysMenu',
      dialog: {
        width: '680px', //定义宽度
      },
      form: {//表单数据
        rules: {//表单校验
          name: [{required: true, message: "名称不能为空", trigger: "blur"}],
          type: [{required: true, message: "类型不能为空", trigger: "blur"}],
          sort: [{required: true, message: "必填,并且是0~10000整数", trigger: "blur", min: 0, max: 10000, type: 'number'}]
        },
      },
    }
  },
  created() {
    // 局部混入，用于覆写initDialog方法
    const originalInitDialog = this.initDialog; // 保存原始的initDialog方法引用

    this.initDialog = function (params) {
      // 在这里可以添加你自己的逻辑
      this.handleParentDept(params.row)
      if (params.title === '复制') {
        this.copyClick(params)
      } else {
        // 调用原始的initDialog方法
        originalInitDialog.call(this, params);
        // 或者，在执行完原始逻辑后添加额外的处理逻辑
      }
    };
  },
  methods: {
    // 选择图标
    selected(name) {
      this.form.info.icon = name;
      this.$forceUpdate()
    },
    clickNode($event, node) {
      $event.target.parentElement.parentElement.firstElementChild.click();
    },
    changeLanguage(node) {
      // 选中最后一级，下拉框收缩
      if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
        this.$refs.cascaderHandleRef.dropDownVisible = false;
      }
    },
    //处理上级菜单
    handleParentDept(row) {
      let id = null
      if (row && row.id) {
        id = row.id
      }
      let config = {
        url: "/sysMenu/tree",
        method: 'post',
        data: {id: id}
      }
      this.axios(config).then(res => {
        this.options = res.data
      })
    }
  }
}
</script>
